<template>
  <el-dialog :title="title" :visible="showDialog" @close="closeFn()">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title" />
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <quill-editor
          v-model="ruleForm.content"
          placeholder="请输入内容"
        />
      </el-form-item>
      <template>
        <el-row type="flex" justify="center">
          <el-button size="small" type="primary" @click="addbtn">确定</el-button>
          <el-button size="small" @click="closeFn()">取消</el-button>
        </el-row>
      </template>
    </el-form></el-dialog>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { addPagesInterface, editorPagesInterface } from '@/api/interface/pagesInterface'
export default {
  components: {
    quillEditor
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ruleForm: {
        title: '',
        content: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.ruleForm.id ? '编辑页面' : '添加页面'
    }
  },
  methods: {
    // 确定
    async addbtn() {
      // 表单验证
      await this.$refs.ruleForm.validate(async(valid) => {
        // 表单正确
        if (valid) {
          // 判断是新增还是编辑
          // 根据ID判断
          if (this.ruleForm.id) {
            // 调用编辑接口
            await editorPagesInterface(this.ruleForm)
          } else {
            // 调用新增接口
            await addPagesInterface(this.ruleForm)
          }
          // 更新页面列表
          // this.getPagesInterface()
          // 关闭弹窗
          this.closeFn()
        } else {
          console.log('表单无效')
        }
      })
    },
    // 关闭弹窗
    closeFn() {
      // 清空数据
      this.ruleForm = {
        title: '', // 标题
        content: '' // 内容
      }
      // 清空校验规则
      this.$refs.ruleForm.resetFields()
      this.$parent.getPagesInterface()
      // 关闭弹窗
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped>

</style>
